<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a4j="http://richfaces.org/a4j">
<h:head>
</h:head>
<h:body>
	<rich:panel id="panelListMovimiento">
		<f:facet name="header">
			<h:outputText value="#{labels['titleListPanelMov']}"
				styleClass="panelTitle" />
		</f:facet>

		<h:form id="formListMovimiento1">
			<rich:toolbar height="30px">
				<rich:dropDownMenu>
					<f:facet name="label">
						<h:panelGrid>
							<h:outputText value="#{labels['orderBy']}" styleClass="menuLabel" />
						</h:panelGrid>
					</f:facet>

					<rich:menuItem label="#{labels['code']}"
						action="#{movimientoBean.ordenaMovimientosById()}" />
					<rich:menuSeparator />
					<rich:menuItem label="#{labels['amount']}"
						action="#{movimientoBean.ordenaMovimientosByMonto()}" />
					<rich:menuSeparator />
					<rich:menuItem label="#{labels['cuentaId']}"
						action="#{movimientoBean.ordenaMovimientosByCuenta()}" />
					<rich:menuSeparator />
					<rich:menuItem label="#{labels['clienteId']}"
						action="#{movimientoBean.ordenaMovimientosByCliente}" />
					<rich:menuSeparator />
					<rich:menuItem label="#{labels['date']}"
						action="#{movimientoBean.ordenaMovimientosByFecha()}" />

				</rich:dropDownMenu>
			</rich:toolbar>
		</h:form>
		<h:form id="formListMovimiento2">
			<div align="center">
				<rich:dataTable id="tableListMovimiento"
					value="#{movimientoBean.movimientosList}" var="v_movimiento"
					iterationStatusVar="itMov" rows="20" width="300px" >

					<f:facet name="caption">
						<h:outputText value="#{labels['titleListPanelMov']}" />
						<a4j:commandLink
							rendered="#{movimientoBean.sessionBean.activaPanelErrorMovimiento}">
							<h:graphicImage value="/page/images/popcorn-icon.png" alt="error" />
							<rich:tooltip styleClass="error">
								<p>#{movimientoBean.sessionBean.msjPanelError}</p>
								<p>#{movimientoBean.sessionBean.toolTipError}</p>
							</rich:tooltip>
						</a4j:commandLink>
					</f:facet>
					<rich:column>
						<f:facet name="header">#{labels['code']}</f:facet>
						<h:outputText value="#{v_movimiento.movimientoId}"
							id="movimientoId" />
					</rich:column>

					<rich:column>
						<f:facet name="header">#{labels['amount']}</f:facet>
						<h:outputText value="#{v_movimiento.monto}" id="monto" />
					</rich:column>

					<rich:column>
						<f:facet name="header">#{labels['date']}</f:facet>
						<h:outputText value="#{v_movimiento.fecha}" id="fwcha" />
					</rich:column>
					
					<rich:column>
						<f:facet name="header">#{labels['typeMov']}</f:facet>
						<h:outputText value="#{labels['deposit']}"
							id="tipoMov1" rendered="#{v_movimiento.tipo}" />
						<h:outputText value="#{labels['retirement']}"
							id="tipoMov2" rendered="#{!v_movimiento.tipo}"/>
					</rich:column>

					<rich:column>
						<f:facet name="header">#{labels['cuenta']}</f:facet>
						<h:outputText value="#{v_movimiento.cuenta.cuentaId}"
							id="cuentaIdMov" />
					</rich:column>

					<rich:column>
						<f:facet name="header">#{labels['cliente']}</f:facet>
						<h:outputText value="#{v_movimiento.cliente.clienteId}"
							id="clienteIdMov" />
					</rich:column>
					
					

					<rich:column>
						<f:facet name="header">#{labels['delete']}</f:facet>
						<div align="center">
							<a4j:commandLink styleClass="no-decor" execute="@this"
								render="@form"
								oncomplete="#{rich:component('confirmPanelMov')}.show()">
								<h:graphicImage value="/page/images/delete.png" alt="borrar" />
								<a4j:param value="#{v_movimiento.movimientoId}"
									assignTo="#{sessionBean.currentIndex}" />
							</a4j:commandLink>
						</div>
					</rich:column>


					<rich:column>

						<f:facet name="header">#{labels['edit']}</f:facet>
						<div align="center">
							<a4j:commandLink styleClass="no-decor" render="@form"
								execute="@this"
								oncomplete="#{rich:component('editPanelMov')}.show()">
								<h:graphicImage value="/page/images/edit.png" alt="editar" />
								<a4j:param value="#{v_movimiento.movimientoId}"
									assignTo="#{sessionBean.currentIndex}" />
								<f:setPropertyActionListener
									target="#{movimientoBean.movimiento}" value="#{v_movimiento}" />
							</a4j:commandLink>
						</div>
					</rich:column>


					<f:facet name="footer">
						<rich:dataScroller />

					</f:facet>

				</rich:dataTable>


				<a4j:jsFunction name="removeModificacion"
					action="#{movimientoBean.borrarMovimiento}"
					render="tableListMovimiento" execute="@this"
					oncomplete="#{rich:component('confirmPanelMov')}.hide(); return false;" />


				<rich:popupPanel id="confirmPanelMov" autosized="true">
            <p>#{labels['questionDelete']}</p>
            <p>con el id: #{movimientoBean.sessionBean.currentIndex}</p>
            <a4j:commandButton value="#{labels['cancel']}"
						onclick="#{rich:component('confirmPanelMov')}.hide(); return false;" />
					<a4j:commandButton value="#{labels['delete']}"
						onclick="removeModificacion(); return false;" />
				</rich:popupPanel>

				<rich:popupPanel header="#{labels['popupListMov']}"
					id="editPanelMov" domElementAttachment="parent" width="400"
					height="250">
					<h:panelGrid columns="3" id="editGrid">

						<h:outputText value="#{labels['code']}" />
						<h:outputText value="#{movimientoBean.sessionBean.currentIndex}" />
						<h:panelGroup />

						<h:outputText value="#{labels['amount']}" />
						<h:inputText value="#{movimientoBean.movimiento.monto}"
							required="true" id="monto"
							validatorMessage="#{labels['messageValidateRange']}"
							label="Monto field">
							<f:validateDoubleRange minimum="#{labels['minRangeValue']}"
								maximum="#{labels['maxRangeValue']}" />
						</h:inputText>
						<rich:message id="montoMsg" for="monto" />

						<h:outputText value="#{labels['cuentaId']}" />
						<h:selectOneMenu value="#{movimientoBean.cuentaId}"
							id="listaCuentas" style="width: 150px;">
							<f:selectItems value="#{movimientoBean.listCuentas}" />
						</h:selectOneMenu>
						<h:outputText value="" />

						<h:outputText value="#{labels['clienteId']}" />						
						<h:selectOneMenu id="listaClientes"
							value="#{movimientoBean.clienteId}" style="width: 150px;">
							<f:selectItems value="#{movimientoBean.listClientes}" />
						</h:selectOneMenu>
						<h:outputText value="" />
						
						<h:outputLabel value="#{labels['typeMov']}" id="tipoMov"/>
						<h:outputText value="#{labels['deposit']}"
							id="tipoMov1" rendered="#{movimientoBean.movimiento.tipo}" />
						<h:outputText value="#{labels['retirement']}"
							id="tipoMov2" rendered="#{!movimientoBean.movimiento.tipo}"/>

					</h:panelGrid>
					<br />
					<a4j:commandButton value="#{labels['save']}"
						action="#{movimientoBean.editarMovimiento}"
						render="tableListMovimiento" execute="editPanelMov"
						oncomplete="if (#{facesContext.maximumSeverity==null}) {#{rich:component('editPanelMov')}.hide();}" />
					<a4j:commandButton value="#{labels['cancel']}"
						onclick="#{rich:component('editPanelMov')}.hide(); return false;" />
				</rich:popupPanel>

			</div>
		</h:form>
	</rich:panel>
</h:body>
</html>